<template>
  <Card>
    <Form method="post" name="carForm" id="carForm" enctype="multipart/form-data">
      <Row :gutter="16" type="flex" align="middle">
        <Col span="1">
          资金方
        </Col>
        <Col span="2">
          <Select name="fundCode" v-model="searchParams.fundCode" @on-change="selectFund">
            <Option v-for="item in selectDataFunds" :value="item.fundCode" :key="item.fundCode">{{ item.fundName }}</Option>
          </Select>
        </Col>
        <Col span="1">
          产品
        </Col>
        <Col span="2">
          <Select name="productType" v-model="searchParams.productType" @on-change="selectProduct">
            <Option v-for="item in selectDataProducts" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
          </Select>
        </Col>
        <Col span="1">
          交易时间
        </Col>
        <Col span="2">
          <DatePicker name="startDate" v-model="searchParams.startDate" :value="searchParams.startDate" type="date" format="yyyy-MM-dd"></DatePicker>
        </Col>
        <Col span="1">
          ——
        </Col>
        <Col span="2">
          <DatePicker name="endDate" v-model="searchParams.endDate" :value="searchParams.endDate" type="date" format="yyyy-MM-dd"></DatePicker>
        </Col>
        <Col span="1">
          客户姓名
        </Col>
        <Col span="2">
          <Input name="custName" v-model="searchParams.custName"></Input>
        </Col>
        <Col span="1">
          身份证号码
        </Col>
        <Col span="2">
          <Input name="custIdCard" v-model="searchParams.custIdCard"></Input>
        </Col>
        <Col span="1">
          状态
        </Col>
        <Col span="2">
          <Select name="state" v-model="searchParams.state" @on-change="selectState">
            <Option v-for="item in selectDataStates" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="3">
          <Button type="primary"  @click="search()">查询</Button>
          <Button type="primary"  @click="downloadList()">下载</Button>
        </Col>
      </Row>
    </Form>
    <Table :columns="columns1" :data="pageData.list"></Table>
    <br>
    <div style="text-align:center;">
      <Page :total="pageData.total" :current="pageData.pageNum" :page-size="pageData.pageSize" show-elevator show-total @on-change="changePage"></Page>
    </div>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      $ajax: null,
      baseUrl: null,
      pageData: {
        list: [],
        pageNum: 1,
        pageSize: 6,
        total: 0,
        pages: 1
      },
      selectDataFunds: [],
      selectDataProducts: [],
      selectDataStates: [// 扣款状态：-1 代扣款 0.扣款中 1.已扣款 2.取消扣款 3.扣款失败
        {
          value: '-1',
          label: '代扣款'
        },
        {
          value: '0',
          label: '扣款中'
        },
        {
          value: '1',
          label: '已扣款'
        },
        {
          value: '2',
          label: '取消扣款'
        },
        {
          value: '3',
          label: '扣款失败'
        }
      ],
      adminStatusList: [// 管理金退回状态 -1 未退回 0 已退回
        {
          value: '-1',
          label: '未退回'
        },
        {
          value: '0',
          label: '已退回'
        }
      ],
      searchParams: {
        fundCode: null,
        productType: null,
        startDate: null,
        endDate: null,
        custName: null,
        custIdCard: null,
        state: null
      },
      columns1: [
        {
          align: 'center',
          type: 'index',
          width: 60,
          title: '序号'
        },
        {
          align: 'center',
          title: '贷款编号',
          key: 'loanId'
        },
        {
          align: 'center',
          title: '资金方',
          key: 'fundName'
        },
        {
          align: 'center',
          title: '产品',
          key: 'productName'
        },
        {
          align: 'center',
          title: '客户姓名',
          key: 'custName'
        },
        {
          align: 'center',
          title: '身份证号码',
          key: 'custIdCard'
        },
        {
          align: 'center',
          title: '期限',
          key: 'applyTerms'
        },
        {
          align: 'center',
          title: '渠道',
          key: 'channelName'
        },
        {
          align: 'center',
          title: '合同金额',
          key: 'amount'
        },
        {
          align: 'center',
          title: '推荐费费率',
          key: 'serviceFee'
        },
        {
          align: 'center',
          title: '推荐费金额',
          key: 'serviceAmount'
        },
        {
          align: 'center',
          title: '管理金费率',
          key: 'cautionFee'
        },
        {
          align: 'center',
          title: '管理金金额',
          key: 'cautionAmount'
        },
        {
          align: 'center',
          title: '代扣时间',
          key: 'createdDate',
          width: 100,
          render: function (h, params) {
            let time = this.$util.formatTime(params.row.createdDate)
            return h('span', {}, time)
          }.bind(this)
        },
        {
          align: 'center',
          title: '代扣金额',
          key: 'principalAmtAct'
        },
        {
          align: 'center',
          title: '成功金额',
          key: 'principalAmtAct',
          render: function (h, params) {
            var label = ''
            if (params.row.state === '1') {
              label = params.row.principalAmtAct
            }
            return h('span', {}, label)
          }
        },
        {
          align: 'center',
          title: '通道',
          key: 'payChannel'
        },
        {
          align: 'center',
          title: '状态',
          key: 'state',
          render: function (h, params) {
            var state = params.row.state
            for (let i = 0; i < this.selectDataStates.length; i++) {
              if (this.selectDataStates[i].value === state) {
                return h('span', {}, this.selectDataStates[i].label)
              }
            }
          }.bind(this)
        },
        {
          align: 'center',
          title: '管理金状态',
          key: 'adminStatus',
          render: function (h, params) {
            var adminStatus = params.row.adminStatus
            for (let i = 0; i < this.adminStatusList.length; i++) {
              if (this.adminStatusList[i].value === adminStatus) {
                return h('span', {}, this.adminStatusList[i].label)
              }
            }
          }.bind(this)
        },
        {
          align: 'center',
          title: '操作',
          key: 'action',
          width: 100,
          render: function (h, params) {
            var vm = this
            var btnAry = []
            if (params.row.adminStatus !== '0') {
              btnAry.push(h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {

                },
                on: {
                  click: () => {
                    vm.updateAdminStatus(params)
                  }
                }
              }, '手动退回'))
              btnAry.push(h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {

                },
                on: {
                  click: () => {
                    vm.updateAdminStatus(params)
                  }
                }
              }, '退回管理金'))
            }
            return h('div', {}, btnAry)
          }.bind(this)
        },
        {
          align: 'center',
          title: '失败原因',
          key: 'retMsg'
        },
        {
          align: 'center',
          title: '扣款订单编号',
          key: 'orderNumber'
        }
      ]
    }
  },
  methods: {
    selectFund (option) {
      this.searchParams.fundCode = option
    },
    selectProduct (option) {
      this.searchParams.productType = option
    },
    selectState (option) {
      this.searchParams.state = option
    },
    changePage (pageIndex) {
      this.pageData.pageNum = pageIndex
      this.search()
    },
    search () {
      var vm = this
      var url = 'approve/reconciliation/car/service/carInsuranceReconciliationPage/' + this.pageData.pageNum + '/' + this.pageData.pageSize
      this.searchParams.startDate = this.$util.formatTime(this.searchParams.startDate)
      this.searchParams.endDate = this.$util.formatTime(this.searchParams.endDate)
      this.$ajax.post(this.baseUrl + url, this.searchParams).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.pageData = data.data
      })
    },
    init () {
      this.search()
      this.getSelectDataFunds()
      this.getSelectDataProducts()
    },
    getSelectDataFunds () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/service/list', {}).then(re => {
        vm.selectDataFunds = re.data.data
      }).catch(er => {

      })
    },
    getSelectDataProducts () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProduct', {}).then(re => {
        vm.selectDataProducts = re.data.data
      }).catch(er => {

      })
    },
    updateAdminStatus (rowContext) {
      var url = 'approve/reconciliation/car/service/updateAdminStatus'
      var params = {loanId: rowContext.row.loanId, adminStatus: '0'}
      this.$ajax.post(this.baseUrl + url, params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.$Message.success(message)
        rowContext.row.adminStatus = params.adminStatus
      })
    },
    downloadList () {
      document.getElementById('carForm').action = this.baseUrl + 'approve/reconciliation/car/service/downloadList'
      document.getElementById('carForm').submit()
    }
  },
  mounted () {
    this.$ajax = this.$util.ajax()
    this.baseUrl = this.$appContext.marvels_core_approve
    this.init()
  },
  created () {

  }
}
</script>
